* {
  margin: 0;
  padding: 0;

  /* 去除列表样式 */
  list-style: none;
}
/* body弹性布局 */
body {
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
  margin: 0 auto;

  /* 最大宽度
    max-width: 1500px; */
}

/* header弹性声明 */
header {
  display: flex;
  flex-direction: row;

  /* width: 2000px;
    margin: 0 auto; */
}
/* banner顶部区域 */
.banner {
  flex: 0 0 100%;
  margin: 0 auto;

  background-color: yellow;
  height: 60px;
}

section {
  display: flex;
  flex-direction: column;

  /* justify-content: center; */
}

/* 分类区 */
section .category ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  justify-content: space-evenly;
}
section .category ul li {
  flex: 0 0 33%;
  height: 40px;

  background-color: #dcdcdc;
  border-bottom: 1px solid white;

  text-align: center;
  line-height: 40px;
}

section .pic_area ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  justify-content: space-evenly;
}

section .pic_area ul li {
  flex: 0 0 49%;
  height: 100px;

  margin-top: 5px;
  background-color: yellow;

  /* 文字居中 */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
